<template>
  <div>
    <div>
      <el-input
        v-model="filterText"
        placeholder="请输入名称"
        style="width: calc(100% - 30px); margin: 10px 15px 10px 10px"
      >
        >
        <i slot="suffix" class="el-icon-search el-input__icon"></i>
      </el-input>
    </div>
    <el-tree
      ref="tree"
      :data="dataSource"
      :node-key="nodeKey"
      :current-node-key="currentNodeKey"
      :props="defaultProps"
      highlight-current
      default-expand-all
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      :default-expanded-keys="defaultExpandKey"
      :default-checked-keys="defaultCheckKey"
      @node-click="clickNodeChange"
    >
      <!--      :render-content="renderContent"-->
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>
          <svg-icon
            v-if="data.objectType === 'title'"
            icon-class="table"
          ></svg-icon>
          <svg-icon
            v-else-if="data.objectType === 'guide'"
            icon-class="flow7"
          ></svg-icon>
          <svg-icon
            v-else-if="data.objectType === 'classify'"
            icon-class="flow6"
          ></svg-icon>
          <svg-icon v-else icon-class="flow6"></svg-icon>
          <span style="margin-left: 15px">{{ node.label }}</span>
        </span>
        <span v-if="data.objectType === 'classify'" align="right">
          <!--           下拉菜单-->
          <!--          <el-dropdown style='align: right' trigger="click">-->
          <!--              <span class="el-dropdown-link">-->
          <!--              <i class="el-icon-more"></i>-->
          <!--              </span>-->
          <!--              <el-dropdown-menu slot="dropdown">-->
          <!--              <el-dropdown-item>创建计算项目</el-dropdown-item>-->
          <!--            </el-dropdown-menu>-->
          <!--            </el-dropdown>-->
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
  export default {
    name: 'WorkFlowTree',
    props: {
      /*结构树数据源*/
      dataSource: {
        type: Array,
        required: true,
        default: () => [],
      },
      /* key */
      nodeKey: {
        type: String,
        default: 'id',
      },
      defaultProps: {
        type: Object,
        required: true,
      },
      /* 默认展开的节点 */
      defaultExpandKey: {
        type: Array,
        default: () => [],
      },
      /* 默认选中的节点 */
      defaultCheckKey: {
        type: Array,
        default: () => [],
      },
      currentNodeKey: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        filterText: '',
        iconClass: '',
        // currentNodeKey: '',
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      },
      //设定当前被选中的节点
      currentNodeKey: function (newValue, oldValue) {
        this.$refs.tree.setCurrentKey(newValue)
      },
    },
    methods: {
      // 点击节点选中事件 --- 点击时间就得到选中的节点（点击动作就意味着选中 check-on-click-node ）
      clickNodeChange(data) {
        // 将选中的节点传回父组件
        this.$emit('change', data)
        // console.log("tree 传值给 父组件");
      },

      // 搜索过滤
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },

      // 自定义显示函数 后期可改为父组件传入的方式
      renderContent(h, { node, data, store }) {
        if (data.objectType === 'classify') {
          return (
            <span class="custom-tree-node">
              <svg-icon icon-class="wf-item"></svg-icon>
              <span style="margin-left: 15px;">{node.label} </span>

              <span>
                <el-dropdown style="align: right" trigger="click">
                  <span class="el-dropdown-link">
                    <i class="el-icon-more"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>黄金糕</el-dropdown-item>
                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </span>
          )
        } else {
          return (
            <span class="custom-tree-node">
              <svg-icon icon-class="guide"></svg-icon>
              <span style="margin-left: 15px;">{node.label}</span>
            </span>
          )
        }
      },
    },
  }
</script>

<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
